<style lang="less" scoped>
    .main_allScroll{
        padding-top: 0.04rem;
    }
    .main {
        overflow: hidden;
        margin-bottom: 0.35rem;
        background: #fff;
        div{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #efefef;
            padding: 0 0.38rem;
            &:last-child{
                border-bottom: 0;

            }
        }
        .title{
            font-size: 0.32rem;
            color: #333333;
        }
        input {
            width: 76%;
            background: transparent;
            font-size: 0.32rem;
            color: #333333;
            height: 0.9rem;
            border-bottom: 1px solid #dbdbdb;
            &:last-child {
                border-bottom: 0;
            }

        }
    }
    .btns{
        height: 0.8rem;
        padding: 0;
    }

</style>
<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
    <div class="main_allScroll">
        <div class="main">
            <div>
                <span class="title">银行名称</span>
                <input type="text" disabled="disabled" v-model="card.bankName">
            </div>
            <div>
                <span class="title">支行名称</span>
                <input type="text"  v-model="bankBranch" placeholder="请输入支行名称">
            </div>
            <div>
                <span class="title">账户姓名</span>
                <input type="text" disabled="disabled" v-model="user.nameHide" placeholder="请输入银行名称">
            </div>
            <div>
                <span class="title">银行卡号</span>
                <input type="text" disabled="disabled" placeholder="请输入支行名称" v-model="card.bankcardNo">
            </div>
            <div>
                <span class="title">提现金额</span>
                <input type="number" placeholder="请输入提现金额" v-model="amount">
            </div>
        </div>
        <div class="on_b">
            <button class="btns buttonBR" :class="disabled" :disabled="disabled != ''" v-on:click="submit">
                <span>提交</span>
            </button>
        </div>
    </div>
    </div>

</template>
<script>
    import {AlertModule } from 'vux'
    import { mapActions,mapState } from 'vuex'
    export default {
        components: {
            AlertModule
        },
        data() {
            return {
                disabled: "disabled",
                amount:"",
                bankBranch:'',
                card:{}
            };
        },
        activated(){
            this.amount = "";
            this.bankBranch = "";
            this.card={};
            this.queryBankcardDetailInfo();
        },
        methods: {
            //获取银行卡详情
            queryBankcardDetailInfo(){
                this.$ajax.BANK.queryBankcardDetailInfo({bankcardId:this.$route.query.bankcardId})
                    .then(res => {
                        this.card = res.body.content
                        this.bankBranch = res.body.content.bankBranch
                    })
            },
            submit() {
                let that = this
                if(this.amount < this.config.drawbackMin){
                    this.$vux.toast.text('提现金额不能低于' + that.config.drawbackMin, 'middle')
                } else if(this.amount > this.config.drawbackMax){
                    this.$vux.toast.text('提现金额不能高于' + that.config.drawbackMax, 'middle')
                } else {
                    this.$ajax.finance.underlineBalanceDrawback({
                        amount: this.amount,
                        bankCardId : this.$route.query.bankcardId,
                        bankBranch: this.bankBranch
                    }).then((res)=>{
                        this.authIdentityInfo();
                    })
                }
            },
            authIdentityInfo(){
                this.$router.replace({ path: '/success',query:{
                        goUrl:"",
                        type:0,
                        title:'提交成功,等待审核',
                        text:'返回',
                        backUrl:'',

                  }});
            }
        },
        watch: {
            amount:function () {
                if(this.amount && this.bankBranch){
                    this.disabled = '';
                }else{
                    this.disabled = 'disabled';
                }
                if(this.amount.length > 12){
                    this.amount = this.amount.slice(0,12)
                }
            },
            bankBranch:function () {
                if(this.amount && this.bankBranch){
                    this.disabled = '';
                }else{
                    this.disabled = 'disabled';
                }
            }
        },

        computed: mapState({user:state=>state.user, config: state => state.config}),
    }
</script>